<!--
 * @Author: yuanweijiang
 * @Date: 2024-01-03 14:19:33
 * @LastEditors: yuanweijiang
-->
<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef" class="flex items-center">
				<el-form-item prop="layerGroupName">
					<el-input placeholder="请输入图层组名称" clearable style="max-width: 180px" v-model="state.queryForm.layerGroupName" />
				</el-form-item>
				<el-form-item>
					<el-button @click="query" class="ml10" icon="search" type="primary"> 查询 </el-button>
					<el-button icon="Refresh" @click="resetQuery">重置</el-button>
				</el-form-item>
				<div class="absolute right-8">
					<el-form-item>
						<el-button @click="openLayerDialog('add')" class="ml10" icon="CirclePlus" type="primary"> 创建图层组 </el-button>
					</el-form-item>
				</div>
			</el-form>
			<el-table
				class="table-style-one"
				ref="tableRef"
				:data="state.dataList"
				v-loading="state.loading"
				row-key="geoLayerGroupName"
				:expand-row-keys="expands"
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle?.headerCellStyle"
				@filter-change="filterChange"
			>
				<!-- 展开行 -->
				<el-table-column type="expand" width="1">
					<template #default="props">
						<!-- 展开行内容 -->
						<el-table
							:data="props.row.layerVoList"
							:cell-style="tableStyle.childrenCellStyle"
							:header-cell-style="tableStyle?.childrenHeaderCellStyle"
						>
							<el-table-column prop="storeType" label="类型" width="100">
								<template #default="scope">
									<div class="type-tag" :style="typeColor[scope.row.storeType]">{{ getOptName(typeDict, scope.row.storeType) }}</div>
								</template>
							</el-table-column>
							<el-table-column label="图层名称" prop="layerName" show-overflow-tooltip />
							<el-table-column label="样式" prop="styleName" show-overflow-tooltip />
							<el-table-column label="图层说明" prop="layerRemarks" show-overflow-tooltip />
							<el-table-column label="预览">
								<template #default="scope">
									<span @click="openLayerShow(scope.row.layerUrl)" class="jColor">查看</span>
								</template>
							</el-table-column>
							<el-table-column label="管理">
								<template #default="scope">
									<i class="iconfont icon-shanchu jColor" @click="handleDelete(scope.row, props.row)"></i>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</el-table-column>
				<el-table-column prop="layerGroupType" label="类型" width="100">
					<template #default="scope">
						{{ scope.row.layerGroupType ? scope.row.layerGroupType : '图层组' }}
					</template>
				</el-table-column>
				<el-table-column prop="geoLayerGroupName" label="图层组名称">
					<template #default="scope">
						<!-- 自定义 点击展开行 -->
						<div class="cursor-pointer" @click="handleExpand(scope.row)">
							<overflowTip className="overflow-box" :content="scope.row.geoLayerGroupName"></overflowTip>
							<img v-if="!expands.includes(scope.row.geoLayerGroupName)" class="inline-block ml4" src="/@/assets/icons/layer-name-drop.svg" />
							<img v-else class="inline-block ml4" src="/@/assets/icons/layer-name-down.svg" />
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="启用状态" :filters="statusList" column-key="status" :filter-multiple="false">
					<template #default="scope">
						<el-tag :type="scope.row.status ? 'success' : 'info'">{{ scope.row.status == 1 ? '启用' : '禁止' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					prop="projectNameCh"
					label="项目"
					:filters="projectOptions"
					column-key="wokeSpaceName"
					:filter-multiple="false"
					show-overflow-tooltip
				>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip />
				<el-table-column prop="layerGroupRemarks" label="图层说明" show-overflow-tooltip />
				<el-table-column label="预览">
					<template #default="scope">
						<span @click="openLayerShow(scope.row.layerGroupUrl)" class="jColor mr-4">查看</span>
						<span @click="copyText(scope.row.layerGroupUrl)" class="jColor">地址</span>
					</template>
				</el-table-column>
				<el-table-column label="管理">
					<template #default="scope">
						<i class="iconfont icon-bianji1 jColor mr-4" @click="openLayerDialog('edit', scope.row)"></i>
						<i class="iconfont icon-shanchu jColor" @click="handleDelete(scope.row)"></i>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle"> </pagination>
		</div>
		<layerDialog @refresh="getDataList()" ref="layerDialogRef" />
	</div>
</template>

<script lang="ts" name="layerManagement" setup>
import { pageList, deleteLayerGroup, updataLayerGroup } from '/@/api/resource/layerGroups';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { getOptName } from '/@/utils/arrayOperation';
import commonFunction from '/@/utils/commonFunction';
import { useUserInfo } from '/@/stores/userInfo';
import { useI18n } from 'vue-i18n';
// 引入组件
const layerDialog = defineAsyncComponent(() => import('./components/layerGroups/layerGroupsDialog.vue'));
const overflowTip = defineAsyncComponent(() => import('/@/components/tip/overflow-tip.vue'));
const { copyText } = commonFunction();
const { t } = useI18n();
// 定义变量内容
const tableRef = ref();
const queryRef = ref();
const layerDialogRef = ref();
const expands = ref([]); // 存展开行标识
const typeDict = ref([
	{
		text: '矢量',
		value: 'dataStore',
	},
	{
		text: '栅格',
		value: 'coverageStore',
	},
]);
const statusList = ref<any>([
	{ text: '启用', value: 1 },
	{ text: '禁止', value: 0 },
]);
const typeColor = ref<any>({
	dataStore: { background: '#c1deff', color: '#499dff' },
	coverageStore: { background: '#dad7ff', color: '#826EFF' },
});
const projectOptions = computed(() => {
	const userInfo = useUserInfo().userInfos.projectList;
	return userInfo.map((item) => ({
		text: item.label,
		value: item.value,
	}));
});
const state: BasicTableProps = reactive<BasicTableProps>({
	pageList: pageList,
	queryForm: {
		layerGroupName: '',
	},
	isPage: true,
});

const { getDataList, tableStyle, currentChangeHandle, sizeChangeHandle } = useTable(state);

//表格筛选
const filterChange = (filter) => {
	if (filter['status']) {
		state.queryForm.status = filter.status.join(',');
		getDataList();
	} else if (filter['wokeSpaceName']) {
		state.queryForm.wokeSpaceName = filter.wokeSpaceName.join(',');
		getDataList();
	}
};

// 控制展开行
const handleExpand = (row: any) => {
	if (expands.value.includes(row.geoLayerGroupName)) {
		expands.value = expands.value.filter((val) => val !== row.geoLayerGroupName);
	} else {
		expands.value = []; //添加该代码实现手风琴模式，删除该代码取消手风琴模式
		expands.value.push(row.geoLayerGroupName);
		// tableRef.value.toggleRowExpansion(row);
	}
};

// 查看图层iframe
const openLayerShow = (layerUrl: any) => {
	window.open(layerUrl, '_blank');
};

// 搜索事件
const query = () => {
	state.dataList = [];
	getDataList();
};

// 清空搜索条件
const resetQuery = () => {
	queryRef.value.resetFields();
	state.dataList = [];
	getDataList();
};

// 打开图层弹窗
const openLayerDialog = (type?: string, row?: any) => {
	layerDialogRef.value.openDialog(type, row);
};

// 删除操作
const handleDelete = async (row?: any, parentRow?: any) => {
	try {
		await useMessageBox().confirm(t('common.delConfirmText'));
	} catch {
		return;
	}

	try {
		if (parentRow) {
			// 删除图层组列表图层
			const newArray = parentRow.layerVoList
				.filter((obj: any) => obj.layerUrl !== row.layerUrl)
				.map((obj: any) => {
					return { nameSpace: obj.nameSpace, title: obj.layerName };
				});
			await updataLayerGroup({
				nameSpace: parentRow.nameSpace,
				layerGroupName: parentRow.geoLayerGroupName,
				status: parentRow.status,
				layerGroupRemarks: parentRow.layerGroupRemarks,
				layerList: newArray,
			});
		} else {
			await deleteLayerGroup({ layerGroupName: row.geoLayerGroupName, nameSpace: row.nameSpace });
		}
		getDataList();
		useMessage().success(t('common.delSuccessText'));
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};
</script>

<style lang="scss">
.overflow-box {
	display: inline-block;
	vertical-align: bottom;
	width: 60px;
}
</style>
